<template>
	<div class="main-box minHeight"  v-loading="loading">
		<div class="dl-row mar-bottom-20">
		    <div class="search-box" style="margin-right: 20px">
		        <el-input
		                placeholder="请输入课程关键词"
		                prefix-icon="el-icon-search"
						clearable
						@clear="init()"
		                v-model="courseName">
		        </el-input>
		    </div>
		    <el-button type="success" round size="small" @click="init()">搜索</el-button>
		</div>
		<div v-if="data.length>0">
			<div class="class-list dl-row-sb end" v-for= "(item,index) in data" :key="index">
				<div class="dl-row center">
				  <img :src="item.themeImage"  @click="toDetail(item.id)" >
				  <div  @click="toDetail(item.courseId)" style="width: 540px;height: 100px" class="dl-column-sa">
					<h1>{{item.courseName}}</h1>
					<ul data-v-7450f29b="" class="sea-btn-blue">
					  <li data-v-7450f29b="">课程类型：{{item.typeName}}</li>
					</ul>
					<div>
					  <span class="text" style="margin-right: 20px">收藏人数：{{item.collectNum}}人</span>
					  <span class="text" style="margin-right: 20px">学习人数：{{item.studyNum}}人</span>
					  <span class="text">收藏时间：{{item.create_time |formateDate }}</span>
					</div>
				  </div>
				</div>
				  <div class="dl-row right-btn ">
						<el-button type="success" round @click="toDetail(item.id)"><i class="el-icon-position"></i>&nbsp;继续学习</el-button>
						<el-button type="success" round @click="cancelCollection(item.id)"><i class="el-icon-star-on down-star"></i>&nbsp;取消收藏</el-button>
				  </div>
				</div>
				<el-pagination
						:total="total"
						:current-page="page + 1"
						style="margin-top: 8px;"
						layout="total, prev, pager, next, sizes"
						@size-change="sizeChange"
						@current-change="pageChange"/>
		</div>
		<div class="note-box mar-top-20" v-if="data.length==0  && !loading">
			<el-empty class="empty" :image-size="250" :image="require('../../../assets/no_data_images/no_collect.png')" description="无收藏记录"></el-empty>
		</div>
	</div>
</template>

<script>
	import { formateDate } from '@/utils/index'
	import initData from '@/mixins/initData'
	import {cancelCollect } from '@/api/collect'
	export default {
	  mixins: [initData],
	  data() {
		return {
		  classImg: require('../../../assets/image/u38.jpg'),
		  loading:false,
		  courseName:"",
		}
	  },
	  filters: {
	    formateDate (time) {
	      let date = new Date(time)
	      return formateDate(date, 'yyyy-MM-dd hh:mm:ss')
	    }
	  },
	  created() {
	  	this.$nextTick(() => {
			this.init()
	  	})
	  },
	  methods: {
		beforeInit() {
		    this.url = 'web/collect-record/person-collect-course-list'
		    this.params = {
		      page: this.page,
		      size: this.size,
		      name: this.courseName
		    }
		    return true
		},
		toDetail(id) {
		  this.$router.push({path:'/course/detail',
		  query:{
		  	"courseId":id
		  }
		  })
		},
		continueStudy(item){
			this.$router.push({ path: "/course/video", query: { id: item.courseResourceId,courseId:item.courseId} })
		},
		cancelCollection(id) {//取消收藏
			this.$confirm('此操作将取消课程收藏, 是否继续?', '提示', {
			   confirmButtonText: '确定',
			   cancelButtonText: '取消',
			   type: 'warning'
			}).then(() => {
				cancelCollect(id).then(res => {
				    this.$message.error(`已取消收藏！`)
					this.init()
					// if(this.couserObj.collectNum>0){
					// 	this.couserObj.collectNum-=1;
					// }
				})
			}).catch(() => {
				this.$message({
					type: 'error',
					message: '已取消收藏'
				});          
			});
		},
		getImage(obj){
			var array=eval('(' + obj.themeImage + ')');
			var imageUrl="";
			if(array.length>0){
				imageUrl=array[0].url;
			}
			return imageUrl;
		}
	  },
	}
</script>
<style scoped>
	.class-list{
		cursor: pointer;
	}
	.empty{
		 height: calc(100vh - 537px);
	}
	.minHeight{
		min-height: calc(100vh - 254px);
	}
  .class-list h1{
    margin-bottom: 0;
  }
</style>